<div class="assign">
  <div class="select-user">
    <d-tabs [type]="'tabs'" [(activeTab)]="tabActiveId">
      <d-tab id="工序人员" title="工序人员">
        <div>
          <div class="d-input">
            <input dTextInput style="width: 150px;" [error]="false" placeholder='请选择人员' name="SearchTerm"
              [(ngModel)]="this.searchName">
            <d-button id="primaryBtn" style="margin-left: 8px" (click)="search()"><i
                class="icon icon-filter-o me-2"></i>查询</d-button>
            <d-button bsStyle="common" style="margin-left: 8px" (click)="reset()"><i
                class="icon icon-refresh me-2"></i>重置</d-button>
          </div>
          <div class="mt-3">
            <div>
              <d-data-table [lazy]="true" [dataSource]="tableData" [scrollable]="true" [fixHeader]="true"
                [maxHeight]="tableheight" [resizeable]="true" [tableOverflowType]="'auto'" [scrollable]="true"
                [resizeable]="true" [colDraggable]="true" [tableWidthConfig]="tableWidthConfig">
                <thead dTableHead>
                  <tr dTableRow>
                    <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
                  </tr>
                </thead>
                <tbody dTableBody *ngIf="tableData.length>0">
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
                    <tr dTableRow>
                      <td dTableCell [rowItem]="rowItem">
                        <span dTooltip [content]="rowItem?.employeeCode">{{rowItem?.employeeCode}}</span>
                      </td>
                      <td dTableCell [rowItem]="rowItem">
                        <span dTooltip [content]="rowItem?.name">{{rowItem?.name}}</span>
                      </td>
                      <td dTableCell [rowItem]="rowItem" >
                        <span dTooltip [content]="rowItem?.jobNumber">{{rowItem?.jobNumber}}</span>
                      </td>
                      <td dTableCell [rowItem]="rowItem">
                        <span dTooltip [content]="rowItem?.departmentName">{{rowItem?.departmentName}}</span>
                      </td>
                      <td dTableCell [rowItem]="rowItem">
                        <span ><a class="devui-link" [attr.disabled]="isAssigned(rowItem) ? '' : null"
                            (click)="!isAssigned(rowItem) && assign(rowItem)">分配</a></span>
                      </td>
                    </tr>
                  </ng-template>
                </tbody>
              </d-data-table>
            </div>
            <div *ngIf="tableData.length==0">
              <div class="empty">
                <div class="empty-text">暂无数据</div>
              </div>
            </div>
          </div>
          <div class="page-footer">
            <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [maxItems]="5"
              [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="pager.pageSize"
              [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
              (pageSizeChange)="pageSizeChange($event)">
            </d-pagination>
          </div>
        </div>
      </d-tab>
      <d-tab id="全部人员" title="全部人员">
        <div>
          <div class="d-input">
            <input dTextInput style="width: 150px;" [error]="false" placeholder='请选择人员' name="SearchTerm"
              [(ngModel)]="this.searchName">
            <d-button id="primaryBtn" style="margin-left: 8px" (click)="search()"><i
                class="icon icon-filter-o me-2"></i>查询</d-button>
            <d-button bsStyle="common" style="margin-left: 8px" (click)="reset()"><i
                class="icon icon-refresh me-2"></i>重置</d-button>
          </div>
          <div class="mt-3">
            <div>
              <d-data-table [lazy]="true" [dataSource]="displayTableData" [scrollable]="true" [fixHeader]="true"
                [maxHeight]="tableheight" [resizeable]="true" [tableOverflowType]="'auto'" [scrollable]="true"
                [resizeable]="true" [colDraggable]="true" [tableWidthConfig]="tableWidthConfig">
                <thead dTableHead>
                  <tr dTableRow>
                    <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
                  </tr>
                </thead>
                <tbody dTableBody>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
                    <tr dTableRow>
                      <td dTableCell [rowItem]="rowItem">
                        <span dTooltip [content]="rowItem?.employeeCode">{{rowItem?.employeeCode}}</span>
                      </td>
                      <td dTableCell [rowItem]="rowItem">
                        <span dTooltip [content]="rowItem?.name">{{rowItem?.name}}</span>
                      </td>
                      <td dTableCell [rowItem]="rowItem" >
                        <span dTooltip [content]="rowItem?.jobNumber">{{rowItem?.jobNumber}}</span>
                      </td>
                      <td dTableCell [rowItem]="rowItem">
                        <span dTooltip [content]="rowItem?.departmentName">{{rowItem?.departmentName}}</span>
                      </td>
                      <td dTableCell [rowItem]="rowItem">
                        <span><a class="devui-link" [attr.disabled]="isAssigned(rowItem) ? '' : null"
                            (click)="!isAssigned(rowItem) && assign(rowItem)">分配</a></span>
                      </td>
                    </tr>
                  </ng-template>
                </tbody>
              </d-data-table>
            </div>

          </div>
          <div class="page-footer">
            <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [maxItems]="5"
              [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="pager.pageSize"
              [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
              (pageSizeChange)="pageSizeChange($event)">
            </d-pagination>
          </div>
        </div>
      </d-tab>
    </d-tabs>
  </div>
  <div class="selection">
    <div class="selection-header">
      <span>已选人员</span>
    </div>
    <div>
      <div class="mt-3">
        <d-data-table [lazy]="true" [dataSource]="selection" [scrollable]="true" [fixHeader]="true"
          [maxHeight]="selectionheight" [resizeable]="true" [tableOverflowType]="'auto'" [scrollable]="true"
          [resizeable]="true" [colDraggable]="true" [tableWidthConfig]="selectionWidthCon">
          <thead dTableHead>
            <tr dTableRow>
              <th dHeadCell *ngFor="let colOption of selectionData.columns">{{ colOption.header }}</th>
            </tr>
          </thead>
          <tbody dTableBody>
            <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
              <tr dTableRow>
                <td dTableCell [rowItem]="rowItem">
                  <span><a class="devui-link" (click)="delete(rowItem)">移除</a></span>
                </td>
                <td dTableCell [rowItem]="rowItem">
                  <span dTooltip [content]="rowItem?.employeeCode">{{rowItem?.employeeCode}}</span>
                </td>
                <td dTableCell [rowItem]="rowItem">
                  <span dTooltip [content]="rowItem?.name">{{rowItem?.name}}</span>
                </td>
              </tr>
            </ng-template>
          </tbody>
        </d-data-table>
      </div>
    </div>
  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class custom-class2'" [style]="{ left: '50%',top:'-50%' }"></d-toast>
